import styled from 'styled-components'
import LogoPick from '../statics/logo.png'

export  const HeaderWrapper = styled.div`
position:relative;
height: 58px;
border-bottom:1px solid #f0f0f0;
` 


export const Nav = styled.div`
 width:960px;
 height:56px;
 margin:-76px auto;
 padding-right:70px;
 box-sizing:border-box;

`
export const Logo = styled.a.attrs({
    href:'/'
})`
position：absolute;
top:0;
left:0;
display:block;
width:100px;
height:56px;
background:url(${LogoPick});
background-size:contain;
`
export const NavItem = styled.div`
line-height:56px;
padding:0 15px;
font-size:17px;
color:#333;
&.left{
    float:left;
}
&.right{
    float:right;
    color:#969696;

}
&.active{
    color:red;
    padding:0 15px;
}
`
export  const Navsearch = styled.input.attrs({
    placeholder: '搜索'
})`
width:160px;
height:38px;
 border:none;
 outline:none;
 border-radius:19px;
 margin-top:9px;
 margin-left:20px;
 padding:0 30px 0 35px;
 color:#777;
 box-sizing:border-box;
 background:#eee;
 font-szize:14px;
 &::placeholder{
     color:#999;
 }
 &.focused{
     width:200px;
     transition:width 0.2s;
 }
 
`
export const Addtion = styled.div`
position:absolute;
 right:0;
 top:0;
 height:56px;

`;
export const Button = styled.div`
float:right;
line-height:38px;
border-radius:19px;
margin-top:9px;
margint-right:20px;
font-size:14px;
padding: 0 20px;
border:1px solid #ec6149;
&.reg{
    color:#ec6149
}
&.writting{
    color:#fff;
    background:#ec6149;
}
`